{% extends "layout.html" %}
{% block css %}
<style>
.form-horizontal select.m-b{padding-top: 3px}
</style>
{% endblock %}
{% block content %}
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>用户管理 <small>用户列表</small></h5>
                        <div class="ibox-tools"></div>
                    </div>
                    <div class="col-xs-5 col-md-5">
                        
                        <!--新增按钮-->
                        <button type="button" onClick="add(this)" class="btn btn-w-m btn-primary"><i class="fa fa-plus-circle"></i> 新增管理员</button></a>
                        <a onClick="javascript:window.location.reload();"><button type="button" class="btn btn-w-m btn-info"><i class="fa fa-undo"></i> 刷新页面</button></a>
                    
                    </div>
                    <div class="col-xs-6 col-md-6">
                        <div class="input-group m-b">
                            <div class="input-group-btn">
                                <button data-toggle="dropdown" class="btn btn-white" type="button" aria-expanded="false">
                                   查询条件
                                </button>
                            </div>
                            <input placeholder="账号" type="text" class="form-control" name="" value=""  id='tablesSearch'>
                            <span class="input-group-btn"><button  id="searchButton" type="button" class="btn btn-primary">搜索</button></span>
                        </div>
                    </div>

                    <div class="ibox-content">
                        <table id="dataTables" class="table table-striped table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>编号</th>
                                    <th>账号</th>
                                    <th>角色</th>
                                    <th>邮箱</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                               
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>编号</th>
                                    <th>账号</th>
                                    <th>角色</th>
                                    <th>邮箱</th>
                                    <th>操作</th>
                                </tr>
                            </tfoot>
                        </table>

                    </div>
                </div>
            </div>
        </div>
    </div>
    
   
        
    
    
    <!--新增用户-->
    <div class="modal inmodal fade" id="userAdd" tabindex="-1" role="dialog"  aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span>
                        <span class="sr-only">关闭</span>
                    </button>
                    <h2 class="modal-title">新增管理员</h2>
                </div>
                <div class="modal-body">
                    <div class="ibox-content">
                        <form class="form-horizontal m-t" id="userForm">

                            <div class="form-group">
                                <label class="col-sm-3 control-label">登录名称：</label>
                                <div class="col-sm-7">
                                    <input id="username" name="username" class="form-control" type="text">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">登录密码：</label>
                                <div class="col-sm-7">
                                    <input  id="passwd" type="text" name="passwd" class="form-control">
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label class="col-sm-3 control-label">管理员邮箱：</label>
                                <div class="col-sm-7">
                                    <input  id="email" type="text" name="email" class="form-control">
                                </div>
                            </div>
          
                            <div class="form-group">
                                <div class=" col-sm-6 col-sm-offset-3">
                                    <button class="btn btn-default" type="reset">重置</button>
                                    <button class="btn btn-primary" type="submit">提交</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>  
        
    <!--编辑-->
    <div class="modal inmodal fade" id="userUpdate" tabindex="-1" role="dialog"  aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span>
                        <span class="sr-only">关闭</span>
                    </button>
                    <h2 class="modal-title">编辑管理员</h2>
                </div>
                <div class="modal-body">
                    <div class="ibox-content">
                        <form class="form-horizontal m-t" id="userFormUpdate">
                            
                            <input id="update_id" name="id" class="form-control" type="hidden">
                            
                            <div class="form-group">
                                <label class="col-sm-3 control-label">登录名称：</label>
                                <div class="col-sm-7">
                                    <input id="update_username" name="username" class="form-control" type="text">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">登录密码：</label>
                                <div class="col-sm-7">
                                    <input  id="update_passwd" type="text" name="passwd" class="form-control">
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label class="col-sm-3 control-label">管理员邮箱：</label>
                                <div class="col-sm-7">
                                    <input  id="update_email" type="text" name="email" class="form-control">
                                </div>
                            </div>
          
                            <div class="form-group">
                                <div class=" col-sm-6 col-sm-offset-3">
                                    <button class="btn btn-default" type="reset">重置</button>
                                    <button class="btn btn-primary" type="submit">提交</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>  

</body>
{% endblock %}

{% block script %}
    <!-- Data Tables -->
    <script src="{{url('/assets/js/plugins/dataTables/jquery.dataTables.js')}}"></script>
    <script src="{{url('/assets/js/plugins/dataTables/dataTables.bootstrap.js')}}"></script>
    <script src="{{url('/assets/js/plugins/layer/layer.min.js')}}"></script>

    
    <!-- jQuery Validation plugin javascript-->
    <script src="{{url('/assets/js/plugins/validate/jquery.validate.min.js')}}"></script>
    <script src="{{url('/assets/js/plugins/validate/messages_zh.min.js')}}"></script>

    
    
<script>
        
    $(document).ready(function () {
        
        
       
        dataTablesFunction();  // 默认模态框

        // 点击搜索
        $('#searchButton').click(function(){
            var Tables = dataTablesFunction();
        });
            
        // 新增用户
        var icon = "<i class='fa fa-times-circle'></i> ";
        var validate = $("#userForm").validate({
            debug: false, //调试模式取消submit的默认提交功能 
            rules: {
                username:{
                    required: true,
                    remote:{
                        url:"{{url('/user/unique.html')}}",
                        delay: 800,
                        type:"post",
                        data: {
                            name :'username',
                            value:function(){
                               return $('#username').val();
                            }
                        }
                    }
                },
                passwd:{required: true},
                email:{required: true,email:true}
            },
            messages: {
                username: {
                    required: icon + "请输入管理员名称",
                    remote: icon + "输入管理员已存在"
                },
                passwd:{required: icon + "请填写密码"},
                email:{required: icon + "请填写邮箱"}
            },
            submitHandler: function(form){   //表单提交句柄,为一回调函数，带一个参数：form   
                var datas = $(form).serialize();
                $.ajax({
                    type: "POST",
                    url: "{{ url('/user/adddata.html') }}",
                    data: datas,
                    dataType: "json",
                    success: function(dataJson){
                        if(dataJson.valid === 0){
                           var message = dataJson.message;
                           $.each(message,function(i,v){  // 后端验证提示
                               var error ='<span class="help-block m-b-none"><i class="fa fa-times-circle"></i> '+v+'</span>';
                               $('#'+i).after(error);
                           });
                       }else{
                           text = 'error';
                           if(dataJson.status == 100900 ){
                               text = 'success';
                               dataTablesFunction(); // 刷新表格
                           }
                           $.AngelaAutoTips({
                               msg : dataJson.message,     //显示的消息
                               type : text		   //提示类型（1、success 2、error 3、warning）
                           });
                       }
                    },
                    error:function(){
                        $.AngelaAutoTips({
                            msg : ' 很抱歉！新增失败，请核实信息是否正确', //显示的消息
                            type : 'error'		   //提示类型（1、success 2、error 3、warning）
                        });
                    }
                });
            }
        });  // 表单验证
       
        // 编辑用户
        var validate = $("#userFormUpdate").validate({
            debug: true, //调试模式取消submit的默认提交功能 
            rules: {
                username:{
                    required: true,
                    remote:{
                        url:"{{url('/user/unique.html')}}",
                        delay: 800,
                        type:"post",
                        data: {
                            name :'username',
                            value:function(){
                               return $('#username').val();
                            }
                        }
                    }
                },
                email:{required: true,email:true}
            },
            messages: {
                username: {
                    required: icon + "请输入管理员名称",
                    remote: icon + "输入管理员已存在"
                },
                passwd:{required: icon + "请填写密码"},
                email:{required: icon + "请填写邮箱"}
            },
            submitHandler: function(form){   //表单提交句柄,为一回调函数，带一个参数：form   
                var datas = $(form).serialize();
                $.ajax({
                    type: "POST",
                    url: "{{ url('/user/update.html') }}",
                    data: datas,
                    dataType: "json",
                    success: function(dataJson){
                        if(dataJson.valid === 0){
                           var message = dataJson.message;
                           $.each(message,function(i,v){  // 后端验证提示
                               var error ='<span class="help-block m-b-none"><i class="fa fa-times-circle"></i> '+v+'</span>';
                               $('#update_'+i).after(error);
                           });
                       }else{
                           text = 'error';
                           if(dataJson.status == 100600 ){
                               text = 'success';
                               dataTablesFunction(); // 刷新表格
                               var t2 = window.setTimeout(function(){
                                    $('#userUpdate').modal('hide');  // 关闭模特框
                               },5000);//使用字符串执行方法 
                           }
                           $.AngelaAutoTips({
                               msg : dataJson.message,     //显示的消息
                               type : text		   //提示类型（1、success 2、error 3、warning）
                           });
                       }
                    }
                });
            }
       });  // 表单验证
    });
    
     
    // 数据表格
    var dataTablesFunction = function(){
        var dataTables = $('#dataTables').dataTable({
             serverSide: true,
             processing: false,
             searching: true,
             destroy: true, //摧毁一个已经存在的Datatables，然后创建一个新的，
             order: [[ 0, 'desc' ]],
             ajax: {
                type: "POST",
                dataType: 'json',
                url: "{{ url('/user/getdata.html') }}",
                data: function(data){
                    var colvalue = $('#tablesSearch').val(); 
                    data.columns[1]['search']['value'] = colvalue; // 指定列进行搜索
                },
                complete: function (xhr, ts) {
                    // 提示处理
                    $('[data-toggle="tooltip"]').tooltip();
                    $('.dataTables_filter').hide();
                }
            },
            columns: [
                {"data": "id","searchable": false },
                {"data": "username","searchable": false },
                {"data": "role_id","searchable": false },
                {"data": "email","orderable": false},
                {"data": 'action',
                    "render": function (data, type, full, meta) {
                        if(data == 1){  // 超级管理员
                            return '<span class="glyphicon glyphicon-warning-sign text-danger">无需操作</span>';
                        }
                        var button = '<a  data-toggle="tooltip" data-placement="right"  data-id="'+data+'" data-row="'+escape(JSON.stringify(full))+'" onClick="update(this)"  title="编辑"  href="javascript:void(0);"><i class="fa fa-pencil-square-o text-navy"></i></a>';
                        button += ' | <a  data-toggle="tooltip" data-placement="right" data-id="'+data+'" onClick="del(this)"  href="javascript:void(0);" title="删除" ><i class="glyphicon glyphicon-trash text-navy"></i></a>';
                        button += ' | <a  data-toggle="tooltip" data-placement="right" data-id="'+data+'" onClick="repass(this)"  href="javascript:void(0);" title="重置密码"><i class="glyphicon glyphicon-refresh text-navy"></i></a>';
                        return button;
                    },"searchable": false,"orderable": false
                }
            ]
        });
        return dataTables;
    };
        
    
    // 添加
    var add = function(that){
         $('#userAdd').modal({backdrop: 'static', keyboard: true});
    };

    // 更新操作
    var update =function(that){
        var data = $(that).attr('data-row');
        var row = unescape(data);
        var rowJson = jQuery.parseJSON(row); 
        $.each(rowJson ,function(index,value){
            $('#update_'+index).val(value); // 设置数据
        });
       // console.log(rowJson);
        $('#userUpdate').modal({backdrop: 'static', keyboard: true});
    };
    
    // 重置密码
    var repass = function(that){
        var id = $(that).attr('data-id');
        layer.alert('你要进行重置密码ID：'+id+' 的记录吗？', {
            title:'操作提示',
            icon: 3,
            closeBtn: 1
        }, function(index){
            var delUrl = "{{ url('/user/repass/"+id+".html')|raw}}";
            $.get( delUrl , function(data){
                if(data.status){
                    layer.msg( data.message , {icon: 1});
                }
            },'json');
        });
    };
    
    

     // 删除操作
    var del = function(that){
        var id = $(that).attr('data-id');
        var tr = $(that).parents("tr");
        tr.addClass('text-muted');
        layer.alert('你要进行删除ID：'+id+' 的记录吗？', {
            title:'操作提示',
            icon: 3,
            closeBtn: 1
        }, function(index){
            var delUrl = "{{ url('/user/del/"+id+".html')|raw}}";
            $.get( delUrl , function(data){
                if(data.status){
                    tr.remove(); // 删除行
                    layer.msg( data.message , {icon: 1});
                }
            },'json');
        });

        $('.layui-layer-close').on( 'click', function () {
            tr.removeClass('text-muted');
        });
    };


        
</script>
{% endblock %}